<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}电影管理系统{% endblock %}</title>

    <!-- 外部资源 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

    <!-- 自定义样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

    {% block extra_css %}{% endblock %}
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="{{ url_for('main.index') }}">
            <i class="fas fa-film me-2"></i>电影管理系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link {% if request.endpoint == 'main.index' %}active{% endif %}"
                       href="{{ url_for('main.index') }}">
                        <i class="fas fa-home me-1"></i>首页
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#addMovieModal">
                        <i class="fas fa-plus-circle me-1"></i>添加电影
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('main.about') }}">
                        <i class="fas fa-info-circle me-1"></i>关于
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主要内容区 -->
<div class="container main-container py-5">
    {% block content %}{% endblock %}
</div>

<!-- 页脚 -->
<footer class="footer">
    <div class="container text-center">
        <p>&copy; 2023 电影管理系统 | 基于 Jinja2 & Bootstrap 5 构建</p>
    </div>
</footer>

<!-- 模态框 -->
{% block modals %}{% endblock %}

<!-- 外部脚本 -->
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

<!-- 自定义脚本 -->
<script src="{{ url_for('static', filename='js/main.js') }}"></script>

{% block extra_js %}{% endblock %}
</body>
</html>